$(function() {
	var dom = document.getElementById("container");
	var myChart = echarts.init(dom);
	var app = {};
	option = null;
	
	$.get("/ExternalTable/airline", function(result) {
		var obj = JSON.parse(result);
		
		var data = [];
		var outlist = obj.outList;

		// QDchufa
		for (var i = 0; i < outlist.length; i++) {
			var name = outlist[i].name;
			var value = outlist[i].value;		
			var to = {};
			to['name'] = name;
			to['value'] = value;
			data.push(to);
		}

		var convertData = function (data) {
		    var res = [];
		    for (var i = 0; i < data.length; i++) {
		        var geoCoord = geoCoordMap[data[i].name];
		        if (geoCoord) {
		            res.push({
		                name: data[i].name,
		                value: geoCoord.concat(data[i].value/5)
		            });
		        }
		    }
		    return res;
		};

		var convertedData = [
		    convertData(data),
		    convertData(data.sort(function (a, b) {
		        return b.value - a.value;
		    }).slice(0, 6))
		];

		option = {
		    backgroundColor: '#404a59',
		    animation: true,
		    animationDuration: 1000,
		    animationEasing: 'cubicInOut',
		    animationDurationUpdate: 1000,
		    animationEasingUpdate: 'cubicInOut',
		    title: [
		        {
		            text: '两小时城市圈',
		            subtext: '今日青岛出发',
		            left: 'center',
		            textStyle: {
		                color: '#fff'
		            }
		        },
		        {
		            id: 'statistic',
		            right: 120,
		            top: 40,
		            width: 100,
		            textStyle: {
		                color: '#fff',
		                fontSize: 16
		            }
		        }
		    ],
		    toolbox: {
		        iconStyle: {
		            normal: {
		                borderColor: '#fff'
		            },
		            emphasis: {
		                borderColor: '#b1e4ff'
		            }
		        }
		    },
		    brush: {
		        outOfBrush: {
		            color: '#abc'
		        },
		        brushStyle: {
		            borderWidth: 2,
		            color: 'rgba(0,0,0,0.2)',
		            borderColor: 'rgba(0,0,0,0.5)',
		        },
		        seriesIndex: [0, 1],
		        throttleType: 'debounce',
		        throttleDelay: 300,
		        geoIndex: 0
		    },
		    geo: {
		        map: 'china',
		        left: '10',
		        right: '35%',
		        center: [108.760253, 34.440384],
		        zoom: 1,
		        label: {
		            emphasis: {
		                show: false
		            }
		        },
		        roam: true,
		        itemStyle: {
		            normal: {
		                areaColor: '#323c48',
		                borderColor: '#111'
		            },
		            emphasis: {
		                areaColor: '#2a333d'
		            }
		        }
		    },
		    tooltip : {
		        trigger: 'item'
		    },
		    grid: {
		        right: 40,
		        top: 100,
		        bottom: 40,
		        width: '30%'
		    },
		    xAxis: {
		        type: 'value',
		        scale: true,
		        position: 'top',
		        boundaryGap: false,
		        splitLine: {show: false},
		        axisLine: {show: false},
		        axisTick: {show: false},
		        axisLabel: {margin: 2, textStyle: {color: '#aaa'}},
		    },
		    yAxis: {
		        type: 'category',
		        name: 'TOP 20',
		        nameGap: 16,
		        axisLine: {show: false, lineStyle: {color: '#ddd'}},
		        axisTick: {show: false, lineStyle: {color: '#ddd'}},
		        axisLabel: {interval: 0, textStyle: {color: '#ddd'}},
		        data: []
		    },
		    series : [
		        {
		            name: 'pm2.5',
		            type: 'scatter',
		            coordinateSystem: 'geo',
		            data: convertedData[0],
		            symbolSize: function (val) {
		                return Math.max(val[2] / 10, 8);
		            },
		            label: {
		                normal: {
		                    formatter: '{b}',
		                    position: 'right',
		                    show: false
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            itemStyle: {
		                normal: {
		                    color: '#ddb926'
		                }
		            }
		        },
		        {
		            name: 'Top 5',
		            type: 'effectScatter',
		            coordinateSystem: 'geo',
		            data: convertedData[1],
		            symbolSize: function (val) {
		                return Math.max(val[2] / 10, 8);
		            },
		            showEffectOn: 'emphasis',
		            rippleEffect: {
		                brushType: 'stroke'
		            },
		            hoverAnimation: true,
		            label: {
		                normal: {
		                    formatter: '{b}',
		                    position: 'right',
		                    show: true
		                }
		            },
		            itemStyle: {
		                normal: {
		                    color: '#f4e925',
		                    shadowBlur: 10,
		                    shadowColor: '#333'
		                }
		            },
		            zlevel: 1
		        },
		        {
		            id: 'bar',
		            zlevel: 2,
		            type: 'bar',
		            symbol: 'none',
		            itemStyle: {
		                normal: {
		                    color: '#ddb926'
		                }
		            },
		            data: []
		        }
		    ]
		};


		myChart.on('brushselected', renderBrushed);

		var PI = Math.PI;
		var circlepath=[];
		var _x=120.386045;
		var _y=36.267131 ;
		
		var r1=10.06;
		var r2=8.03;
		
		var x,y;
		for(var i = 0; i < 360; i += 6) {
             x = Math.cos(PI / 180 * i) * r1 + _x;
             y = Math.sin(PI / 180 * i) * r2 + _y;
             
             var _point=[x,y];
             circlepath.push(_point);
		 }
		
		
		// myChart.setOption(option);
		setTimeout(function () {
		    myChart.dispatchAction({
		        type: 'brush',
		        areas: [
		            {
		                geoIndex: 0,
		                brushType: 'polygon',	           
//		                coordRange: [[119,34],[126,34],[126,39],[119,39]]
		                coordRange:circlepath
		            }
		        ]
		    });
		}, 0);

		function renderBrushed(params) {
		    var mainSeries = params.batch[0].selected[0];

		    var selectedItems = [];
		    var categoryData = [];
		    var barData = [];
		    var maxBar = 30;
		    var sum = 0;
		    var count = 0;

		    for (var i = 0; i < mainSeries.dataIndex.length; i++) {
		        var rawIndex = mainSeries.dataIndex[i];
		        var dataItem = convertedData[0][rawIndex];
		        var pmValue = dataItem.value[2];

		        sum += pmValue;
		        count++;

		        selectedItems.push(dataItem);
		    }

		    selectedItems.sort(function (a, b) {
		        return a.value[2] - b.value[2];
		    });

		    for (var i = 0; i < Math.min(selectedItems.length, maxBar); i++) {
		        categoryData.push(selectedItems[i].name);
		        barData.push(selectedItems[i].value[2]);
		    }

		    this.setOption({
		        yAxis: {
		            data: categoryData
		        },
		        xAxis: {
		            axisLabel: {show: !!count}
		        },
		        title: {
		            id: 'statistic',
		            text:'总执行架次： 范围内共'+sum+'架次航班'
		        },
		        series: {
		            id: 'bar',
		            data: barData
		        }
		    });
		};
		if (option && typeof option === "object") {
		    myChart.setOption(option, true);
		}
	});
	
});